昨天我們用 CSS 把網頁裝扮得漂漂亮亮，但它依然只是「漫畫」——好看，但還是會讓人有想把它變更生動的想法。
今天，終於要迎來前端的第三巨頭：JavaScript（JS），讓網頁真正的「活」起來！

為什麼需要 JavaScript？

想像一下，你逛網路商店時，點「加入購物車」的按鈕：

• 沒有 JS 的世界：按下去後，頁面整個重新刷新，體驗超級卡
• 有 JS 的世界：按一下，右上角購物車數字「+1」，流暢又自然

這就是 JavaScript 的威力——賦予網頁互動能力。並且也是現代網站不可或缺的一部分。

JavaScript 是什麼？

簡單來說，JavaScript 是一種 在瀏覽器上執行的程式語言，專門用來讓網頁「動起來」：

• HTML：結構（Structure）
• CSS：外觀（Presentation）
• JavaScript：行為（Behavior）

學到這裡，我們就能完整拼湊出「前端三劍客」的關係圖：

☆HTML (結構 / Structure)
→ 負責定義內容與骨架，例如標題、段落、圖片
（人的「骨骼」）

☆CSS (樣式 / Style)
→ 負責排版、美化、動畫效果
(衣服、髮型、化妝）

☆JavaScript (互動 / Behavior)
→ 負責動態功能，像是點擊按鈕後跳出提示、表單驗證、API 資料載入
（大腦與行動）

簡單記法：HTML 是「什麼東西」，CSS 是「長怎樣」，JavaScript 是「能做什麼」

如何在網頁裡加上 JS？

1. 行內事件（Inline）——新手最常見，但不推薦

<button onclick="alert('Hello!')">點我</button>
缺點：程式碼和結構混在一起，難以維護

2.內嵌 <script>——適合小規模測試

<script>
  console.log('Hello JavaScript!');
</script>

3. 外部 JS 檔案（最推薦）

<script src="app.js"></script>
將 JS 拆出來，方便多人協作與版本控管，和css一樣推薦和html拆分出來

JS 的核心概念：變數、事件、DOM

1. 變數 (Variables)

用來存資料，ex:暫存的箱子

let name = 'Hank';
const pi = 3.14159;

(let 可變、const 不可變，var 已漸漸被淘汰)

2. 事件 (Events)

網頁互動的靈魂，ex:「有人點擊某個按鍵！」、「輸入完成！」
使用者達成某個我們設定的條件，網頁做出對應的回應。

document.getElementById('btn').addEventListener('click', () => {
  alert('你點了按鈕！');
});

3. DOM 操作 (Document Object Model)

JS 透過 DOM 改變 HTML / CSS

document.querySelector('h1').style.color = 'tomato';

小練習：點擊改顏色

HTML:

<h1 id="title">Hello World</h1>
<button id="btn">變色</button>

JS:

const title = document.getElementById('title');
const btn = document.getElementById('btn');

btn.addEventListener('click', () => {
  title.style.color = title.style.color === 'blue' ? 'tomato' : 'blue';
});

點一下文字顏色就會來回切換

學習心得

第一次接觸 JavaScript，我發現儘管知道想做出什麼，但是要成功打出來還是很困難。但當從程式碼讓文字閃爍那一刻，雖然並不難 但內心真的成就感滿滿。

CSS 讓我感受到的是「美感上的成就」，而 JS 給我的看法更多是「操控上的快感」
而這種成就感，會推著我想學更多，看網站的面向也不同了，了解越多，思考的也越多......
這種期待感，讓學習變得不再是硬背，而是充滿探索＼＼\٩( 'ω' )و //／／